<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Transition - UIkit tests</title>
        <script src="js/test.js"></script>
    </head>

    <body>

        <div class="uk-container">

            <h1>Transition</h1>

            <div class="uk-grid-small uk-child-width-1-3@s uk-child-width-1-6@m" uk-grid>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-fade uk-position-bottom uk-overlay uk-overlay-default"><a href="#">Overlay</a></div>
                    </div>
                    <p class="uk-margin-small-top">Fade</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Fade Cover</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-fade uk-position-cover uk-position-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Fade Cover Small</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-fade uk-overlay-default uk-position-cover"></div>
                        <div class="uk-position-center">Headline</div>
                    </div>
                    <p class="uk-margin-small-top">Without Text</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <span class="uk-position-center uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
                    </div>
                    <p class="uk-margin-small-top">Icon</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <img class="uk-transition-fade uk-position-cover" src="images/dark.jpg" alt="">
                    </div>
                    <p class="uk-margin-small-top">Fade 2 Images</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-position-center uk-transition-scale-up">Headline</div>
                    </div>
                    <p class="uk-margin-small-top">Scale Up</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-scale-down uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Scale Down Cover</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img class="uk-transition-scale-up uk-transition-opaque" src="images/photo.jpg" width="1800" height="1200" alt="">
                    </div>
                    <p class="uk-margin-small-top">Scale Up Image</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img class="uk-transition-scale-down uk-transition-opaque" src="images/photo.jpg" width="1800" height="1200" alt="">
                    </div>
                    <p class="uk-margin-small-top">Scale Down Image</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <img class="uk-transition-scale-up uk-position-cover" src="images/dark.jpg" alt="">
                    </div>
                    <p class="uk-margin-small-top">2 Images</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <img class="uk-transition-scale-up uk-position-cover" src="images/dark.jpg" alt="">
                        <span class="uk-position-center uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
                    </div>
                    <p class="uk-margin-small-top">2 Images + Icon</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-top uk-position-top uk-overlay uk-overlay-default">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Top</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Bottom</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-left uk-position-left uk-overlay uk-overlay-default">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Left</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-right uk-position-right uk-overlay uk-overlay-default">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Right</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-top uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Top Cover</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-bottom uk-position-cover uk-position-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Bottom Cover</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-position-center">
                            <div class="uk-transition-slide-top-small">Headline</div>
                            <div class="uk-transition-slide-bottom-small">Subheadline</div>
                        </div>
                    </div>
                    <p class="uk-margin-small-top">Small Top + Bottom</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-position-center">
                            <div class="uk-transition-slide-left-small">Headline</div>
                            <div class="uk-transition-slide-right-small">Subheadline</div>
                        </div>
                    </div>
                    <p class="uk-margin-small-top">Small Left + Right</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-top-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Top Small</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-bottom-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Bottom Small</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-left-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Left Small</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-right-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Right Small</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-position-center">
                            <div class="uk-transition-slide-top-medium">Headline</div>
                            <div class="uk-transition-slide-bottom-medium">Subheadline</div>
                        </div>
                    </div>
                    <p class="uk-margin-small-top">Medium Top + Bottom</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-position-center">
                            <div class="uk-transition-slide-left-medium">Headline</div>
                            <div class="uk-transition-slide-right-medium">Subheadline</div>
                        </div>
                    </div>
                    <p class="uk-margin-small-top">Medium Left + Right</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-top-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Top Medium</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-bottom-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Bottom Medium</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-left-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Left Medium</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                        <div class="uk-transition-slide-right-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Right Medium</p>
                </div>
            </div>

        </div>

    </body>
</html>
